<template>
  <div>
    <el-menu class="el-menu-vertical-demo">
      <el-menu-item index="1">
        <el-button type="success" @click="handleCreate">新建验收申请</el-button>
      </el-menu-item>
    </el-menu>
  </div>
  <div>
    <el-card style="margin:20px;width: 97%;height: 140px;">
      <el-form :inline="true" :model="searchForm" class="demo-form-inline">
        <el-form-item label="项目名称:" style="width: 25%">
          <el-input v-model="searchForm.projectName" placeholder="项目名称"/>
        </el-form-item>
        <el-form-item label="所属区域:" style="width: 25%">
          <el-input v-model="searchForm.area" placeholder="所属区域"/>
        </el-form-item>
        <el-form-item label="验收内容:" style="width: 25%">
          <el-input v-model="searchForm.content" placeholder="验收内容"/>
        </el-form-item>
        <el-form-item label="验收人:" style="width: 25%">
          <el-input v-model="searchForm.acceptancePerson" placeholder="验收人"/>
        </el-form-item>
        <el-form-item label="检查时限:">
          <el-date-picker
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              value-format="YYYY-MM-DD"
              format="YYYY-MM-DD"
              v-model="times"
          ></el-date-picker>
        </el-form-item>
        <el-form-item style="width: 25% ">
          <el-button type="primary" @click="getApplication">查询申请单</el-button>
          <el-button type="primary" @click="reset">重置查询</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <el-card style="margin:20px;width: 97%;">
      <el-table :data="applicationArr" stripe>
        <el-table-column prop="projectName" label="项目名称" width="150px" align="center"/>
        <el-table-column prop="area" label="区域" width="80px" align="center"/>
        <el-table-column prop="content" label="验收内容" width="170px" align="center"/>
        <el-table-column prop="status" label="状态" width="80" align="center"/>
        <el-table-column prop="applicant" label="申请人" width="70" align="center"/>
        <el-table-column prop="applicationTime" label="申请时间" width="120" align="center"/>
        <el-table-column prop="planTime" label="计划验收时间" width="150" align="center"/>
        <el-table-column prop="acceptancePerson" label="验收人" width="100" align="center"/>
        <el-table-column label="现场照片" align="center" width="100px">
          <template #default="scope">
            <el-button link type="primary" size="small" @click="getImg(scope.row.appPhotos)">查看照片</el-button>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" width="100px">
          <template #default="scope">
            <el-button link type="primary" size="small" @click="getDetail(scope.row.id)">查看详情</el-button>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" width="150px">
          <template #default="scope">
            <el-button link type="primary" size="small" @click="beforeUpdate(scope.row.id)">编辑</el-button>
            <el-button link type="primary" size="small" @click="beforeAudit(scope.row.id)">验收</el-button>
            <el-button link type="danger" size="small" @click="deleteCheck(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div style="margin:30px;float: right;">
        <!--layout="total(总数), sizes(每页总数), prev(上一页), pager(当前页), next(下一页), jumper(跳转页)"
         :pager-count="4" 表示显示4个页码
         :page-sizes="[5, 10, 15, 20]" 表示一共有几个"每页显示多少条"选项
         current-page当前页码 page-size当前页码的条数 total总条数 这三个变量需要和实际数据双向绑定
         :total="400" 表示总条数，需要双向绑定
         @size-change="handleSizeChange" 表示每页显示多少条改变时触发的事件
         @current-change="handleCurrentChange" 表示当前页码改变时触发的事件 -->
        <el-pagination
            layout="total, sizes, prev, pager, next, jumper"
            :page-sizes="[5, 10, 15, 20]"
            v-model:current-page="currentPage"
            v-model:page-size="currentSize"
            v-model:total="total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
        />
      </div>
    </el-card>
    <el-dialog :title="dialogTitle" v-model="dialogVisible"
               :before-close="handleClose"
               width="50%"
    >
      <el-form style="padding: 30px;" label-position="top">
        <el-form-item label="请选择检查单:">
          <el-select placeholder="请选择"  :disabled="saveForm.id" v-model="saveForm.checkId" @change="loadNameAndArea">
            <el-option
                v-for="item in checkArr"
                :label="item.id + '/' + item.projectName+'/'+item.area"
                :value="item.id"

            />
          </el-select>
        </el-form-item>
        <el-form-item label="项目名称:">
          <el-input v-model="saveForm.projectName" placeholder="项目名称" disabled/>
        </el-form-item>
        <el-form-item label="区域:">
          <el-input v-model="saveForm.area" placeholder="区域" disabled/>
        </el-form-item>
        <el-form-item label="验收内容:">
          <el-input v-model="saveForm.content" placeholder="验收内容"/>
        </el-form-item>
        <el-form-item label="计划验收时间:">
          <el-date-picker
              v-model="saveForm.planTime"
              type="date"
              placeholder="选择日期"
              value-format="YYYY-MM-DD"
              format="YYYY-MM-DD"
          />
        </el-form-item>
        <el-form-item label="验收人:">
          <el-input v-model="saveForm.acceptancePerson" placeholder="验收人"/>
        </el-form-item>
        <el-form-item label="验收状态:" v-if="saveForm.id">
          <el-select placeholder="请选择验收状态" v-model="saveForm.status">
            <el-option label="合格" value="103"/>
            <el-option label="不合格" value="104"/>
            <el-option label="超期未检查" value=""/>
          </el-select>
        </el-form-item>
        <el-form-item label="现场照片">
          <el-upload
              v-if="!saveForm.id"
              v-model:file-list="fileList"
              v-model:action="actionUrl"
              name="file"
              limit="1"
              list-type="picture-card"
              :on-preview="handlePictureCardPreview"
              :on-remove="handleRemove"
          >
            <el-icon>
              <Plus/>
            </el-icon>
          </el-upload>
          <el-upload
              v-if="saveForm.id"
              v-model:file-list="editImg"
              v-model:action="actionUrl"
              name="file"
              limit="1"
              list-type="picture-card"
              :on-preview="handlePictureCardPreview"
              :on-remove="handleRemoveEdit"
          >
            <el-icon>
              <Plus/>
            </el-icon>
          </el-upload>
          <el-dialog v-model="imgVisible">
            <img w-full :src="dialogImageUrl"/>
          </el-dialog>
        </el-form-item>
      </el-form>
      <template #footer>
        <el-footer style="text-align: right">
          <el-button type="primary" @click="saveApplication">保存</el-button>
          <el-button @click="handleClose">取消</el-button>
        </el-footer>
      </template>
    </el-dialog>
  </div>

  <el-dialog title="验收" v-model="auditDialogVisible"
             :before-close="handleAuditClose"
             width="80%"
  >
    <el-form style="padding: 30px;" label-position="top">
      <el-row>
        <el-col>
          <el-form-item label="项目名称:">
            <el-input v-model="saveForm.projectName" placeholder="项目名称"/>
          </el-form-item>
        </el-col>
        <el-col>
          <el-form-item label="区域:">
            <el-input v-model="saveForm.area" placeholder="区域"/>
          </el-form-item>
        </el-col>
        <el-form-item label="验收内容:">
          <el-input v-model="saveForm.content" placeholder="验收内容"/>
        </el-form-item>
        <el-form-item label="计划验收时间:">
          <el-date-picker
              v-model="saveForm.planTime"
              type="date"
              placeholder="选择日期"
              value-format="YYYY-MM-DD"
              format="YYYY-MM-DD"
          />
        </el-form-item>
      </el-row>
      <el-row>
        <el-form-item label="验收人:">
          <el-input v-model="saveForm.acceptancePerson" placeholder="验收人"/>
        </el-form-item>
        <el-form-item label="验收状态:" v-if="saveForm.id">
          <el-select placeholder="请选择验收状态" v-model="saveForm.status">
            <el-option label="合格" value="103"/>
            <el-option label="不合格" value="104"/>
            <el-option label="超期未检查" value=""/>
          </el-select>
        </el-form-item>
      </el-row>
    </el-form>
    <template #footer>
      <el-footer style="text-align: right">
        <el-button type="primary" @click="saveApplication">保存</el-button>
        <el-button @click="handleAuditClose">取消</el-button>
      </el-footer>
    </template>
  </el-dialog>
  <el-dialog title="现场照片" v-model="imgDialogVisiable"
             width="50%"
  >
    <img w-full :src="imgUrl"/>
  </el-dialog>
</template>

<script setup>

import {onMounted, ref} from "vue";
import axios from "axios";
import {ElMessage} from "element-plus";
import qs from "qs";

const auditDialogVisible = ref(false);
const dialogVisible = ref(false);
//定义变量保存分页器的当前页数
const currentPage = ref(1);
//定义变量保存分页器的每页显示多少条
const currentSize = ref(5);
//定义变量保存数据总条目数
const total = ref(100);
//修改每页显示多少条，触发此函数
const handleSizeChange = (val) => {
  console.log('每页展示' + val + '条数据');
  getApplication();
}
const saveForm = ref({
  projectName: '',
  area: '',
  content: '',
  applicant: '',
  planTime: '',
  acceptancePerson: '',
  appPhotos: '',
  checkId: ''

})
//修改当前页码，触发此函数
const handleCurrentChange = (val) => {
  console.log('当前的页数为：' + val);
  getApplication()
}

const getDetail = (id) => {

}
const fileList = ref([]);
const dialogImageUrl = ref('');
const imgVisible = ref(false);
//定义变量用来保存图片上传给哪个后端接口地址
const actionUrl = ref(BASE_URL +'/quality_api'+ '/v1/file/upload');
//图片上传后预览
const handlePictureCardPreview = (uploadFile) => {
  dialogImageUrl.value = uploadFile.url
  dialogVisible.value = true;
  console.log(uploadFile);
  //console.log(fileList.value[0].response.data);
}
//移除图片
const handleRemove = (uploadFile, uploadFiles) => {
  console.log(uploadFile, uploadFiles);
  //1.得到要删除的图片路径 uploadFile就是我们要删除的那个图片文件对象
  let imgUrl = uploadFile.response.data;
  //2.给后端发请求,删除图片
  axios.post(BASE_URL+'/quality_api'+'/v1/file/remove?imgUrl='+imgUrl)
      .then((response)=>{
        if (response.data.code==2000){
          ElMessage.success('删除成功!');
        }
      })
}
const handleRemoveEdit = (uploadFile, uploadFiles) => {
  console.log(uploadFile.url, uploadFiles);
  //1.得到要删除的图片路径 uploadFile就是我们要删除的那个图片文件对象
  let imgUrl = uploadFile.url;
  //2.给后端发请求,删除图片
  axios.post(BASE_URL+'/quality_api'+'/v1/file/remove?imgUrl='+imgUrl)
      .then((response)=>{
        if (response.data.code==2000){
          ElMessage.success('删除成功!');
        }
      })
}
const imgDialogVisiable = ref(false);
const imgUrl = ref('');
const getImg = (appPhotos) => {
  imgDialogVisiable.value = true;
  imgUrl.value = BASE_URL+'/quality_api/images'+appPhotos;
  console.log(imgUrl.value);
}
const editImg = ref([]);

const times = ref([]);

const searchForm = ref({
  projectName: '',
  area: '',
  content: '',
  startTime: '',
  endTime: ''

});
const applicationArr = ref([]);
onMounted(() => {
  getApplication();
})
const getApplication = () => {
  searchForm.value.startTime = times.value[0];
  searchForm.value.endTime = times.value[1];
  searchForm.value.pageSize = currentSize.value;
  searchForm.value.pageNum = currentPage.value;

  let data = qs.stringify(searchForm.value);
  console.log(data);
  axios.get(BASE_URL + '/quality_api' + '/v1/quality/application/select?' + data).then((res) => {
    if (res.data.code === 2000) {
      applicationArr.value = res.data.data.list;
      total.value = res.data.data.total;
    } else {
      ElMessage.error(res.data.message);
    }
  })
}

const checkForm = ref({
  projectName: '',
  area: '',
  content: '',
  startTime: '',
  endTime: '',
  photos: ''
});
const checkArr = ref([]);
/*
* 打开新建窗口
 */
const handleCreate = () => {
  dialogVisible.value = true;
  saveForm.value = {
    projectName: '',
    area: '',
    content: '',
    startTime: '',
    endTime: '',
    photos: ''
  };
  dialogTitle.value = '新建申请';
  axios.get(BASE_URL + '/quality_api' + '/v1/quality/check/select?status=' + '待整改').then((res) => {
    if (res.data.code === 2000) {
      checkArr.value = res.data.data.list;
    } else {
      ElMessage.error(res.data.message);
    }
  })
}
const loadNameAndArea = () => {
  checkArr.value.forEach((item) => {
    if (item.id === saveForm.value.checkId) {
      saveForm.value.projectName = item.projectName;
      saveForm.value.area = item.area;
    }
  })
}
const handleClose = () => {
  if (confirm('确定关闭窗口吗？')) {
    dialogVisible.value = false;
  }
}
const handleAuditClose = () => {
  if (confirm('确定关闭窗口吗？')) {
    auditDialogVisible.value = false;
  }
}
/*
* 新建
 */
const saveApplication = () => {
  if (!saveForm.value.projectName || !saveForm.value.area || !saveForm.value.content) {
    ElMessage.error('请完善信息！');
    return;
  }
  let applicant = window.getUser().id;
  saveForm.value.applicant = applicant;
  if (saveForm.value.id != null) {
    saveForm.value.appPhotos = editImg.value[0].response.data;
    console.log(editImg.value[0].response.data)
  }
  let data = qs.stringify(saveForm.value);
  axios.post(BASE_URL + '/quality_api' + '/v1/quality/application/save', data).then((res) => {
    if (res.data.code === 2000) {
      ElMessage.success('保存成功');
      dialogVisible.value = false;
      saveForm.value = {};
      getApplication();
    } else {
      ElMessage.error(res.data.message);
    }
  });
}

/*
* 编辑
 */

const dialogTitle = ref('新建验收申请');
const beforeUpdate = (id) => {
  dialogTitle.value = '编辑验收申请';
  dialogVisible.value = true;
  axios.get(BASE_URL + '/quality_api' + '/v1/quality/application/select?id=' + id).then((res) => {
    if (res.data.code == 2000) {
      saveForm.value = res.data.data.list[0];
      if (saveForm.value.appPhotos != null) {
        editImg.value = [{
          url: BASE_URL + '/quality_api/images' + saveForm.value.appPhotos
        }]
      }
    } else {
      ElMessage.error(res.data.message);
    }
  })
}
/*
* 删除
 */
const deleteCheck = (id) => {
  if (confirm('确定要删除吗？')) {
    axios.post(BASE_URL + '/quality_api' + '/v1/quality/application/delete/' + id).then((res) => {
      if (res.data.code == 2000) {
        ElMessage.success('删除成功');
        getApplication();
      } else {
        ElMessage.error(res.data.message);
      }
    })
  }
}

/*
重置搜索
 */
const reset = () => {
  searchForm.value = {
    projectName: '',
    inspector: ''
  }
  times.value = [];
  getApplication();
}


const beforeAudit = (id) => {
  auditDialogVisible.value = true;
  axios.get(BASE_URL + '/quality_api' + '/v1/quality/application/select?id=' + id).then((res) => {
    if (res.data.code == 2000) {
      checkForm.value = res.data.data.list[0];
    } else {
      ElMessage.error(res.data.message);
    }
  })
}
const audit = (id) => {

}

</script>


<style scoped>

</style>